<template>
	<view class="f30">
		<view class="bf">
			<mg-radio rtype="2" bttc='wei' v-model="aIdx" :arr='arr'></mg-radio>
			<view v-show="aIdx==2" class="p330">
				<view v-for="(v,i) in timeArr" :key='i' class="yjic b-d f-y-c mb30 p03" :style="{borderColor:taIdx==i?tColor:''}">
					<text class="iconfont iconsz f40"></text>
					<view @click="toggleTab('time',v,i,1)" class="f-1 f30 t-c" :class="v.startTime?'wei':'c9'">{{v.startTime||'开始时间'}}</view>
					<view>至<text v-if="v.ciri" class="ml10">次日</text></view>
					<view @click="toggleTab('time',v,i,2)" class="f-1 f30 t-c" :class="v.endTime?'wei':'c9'">{{v.endTime||'结束时间'}}</view>
					<text @click="scsd(i)" class="iconfont iconsc f40" :style="{color:tColor}"></text>
				</view>
			</view>
			<view v-show="aIdx==2" class="foot-btnc p-r">
				<button @click="tjsd" :disabled="tjsdd" class="foot-btn bf b-d wei" :style="{color:tjsdd?'#999':tColor,borderColor:tjsdd?'':tColor}">+添加时段</button>
			</view>
		</view>
		<view class="foot-btnc">
			<button @click="save" class="foot-btn" :style="{background:tColor}">确定</button>
		</view>
		<!-- 时间 -->
		<w-picker mode="time" defaultVal="08:00:00" :current="false" :hasSecond="false" @confirm="onConfirm($event,'time')"
		 ref="time" step="1"></w-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	import utils from '@/common/utils.js'
	import mgRadio from '@/components/form/mg-radio.vue'
	import wPicker from "@/components/form/w-picker.vue";
	export default {
		name: 'yysj',
		components: {
			mgRadio,
			wPicker,
		},
		data() {
			return {
				arr: [],
				aIdx: '',
				timeArr: [],
				taIdx: '',
			}
		},
		async onLoad(options) {
			this.getSystem({
				nosetNB: 1
			})
			this.query = options
			this.util.setNT(options.t == 1 ? '营业时间' : options.t == 2 ? '外卖营业时间' : '堂食营业时间')
			this.timeArr = uni.getStorageSync('yysd')
			console.log(this.timeArr)
			switch (+options.t) {
				case 1:
					this.arr = [{
							value: '1',
							name: '24小时营业',
						},
						{
							value: '2',
							name: '设置营业时段',
						}
					]
					break;
				case 2:
					this.arr = [{
							value: '1',
							name: '与门店营业时间一致',
						},
						{
							value: '2',
							name: '单独设置外卖营业时段',
						}
					]
					break;
				case 3:
					this.arr = [{
							value: '1',
							name: '与门店营业时间一致',
						},
						{
							value: '2',
							name: '单独设置堂食营业时段',
						}
					]
					break;
			}
			this.aIdx = options.r
		},
		mixins: [utilMixins],
		computed: {
			tjsdd() {
				return this.timeArr.length > 2
			},
		},
		methods: {
			tjsd() {
				this.timeArr.push({
					startTime: '00:00',
					endTime: '00:00',
					ciri: true,
				})
			},
			scsd(i) {
				this.timeArr.splice(i, 1)
			},
			toggleTab(str, v, pi, type) {
				this.$refs[str].show();
				this.taIdx = pi
				this.xzitem = {
					item: v,
					index: pi,
					type
				}
			},
			onConfirm(e, key) {
				this.selectTime(e.result, this.xzitem.item, this.xzitem.index, this.xzitem.type)
				// console.log(e, key, this.xzitem.item, this.xzitem.index, this.xzitem.type)
				// this.$set(this.timeArr[this.xzIdx[0]], this.xzIdx[1], e.result)
				// this.timeArr[this.xzIdx[0]][this.xzIdx[1]] = e.result
			},
			selectTime(value, item, index, type) {
				for (let i = 0; i < this.timeArr.length; i++) {
					// console.log('index',i,index)
					if (i == index) {
						// console.log('当前选择数据')
						if (type == 1) {
							if (value >= item.endTime) {
								// console.log('111111')
								item.ciri = true
							} else {
								item.ciri = false
							}
						} else if (type == 2) {
							// console.log('222222')
							if (value <= item.startTime) {
								item.ciri = true
							} else {
								item.ciri = false
							}
						}
					}
				}
				if (type == 1) {
					item.startTime = value
				} else {
					item.endTime = value
				}
				// console.log(item)
				// this.$set(this.timeArr[index], , e.result)
			},
			formatTime() {
				if (this.aIdx == 1) {
					return this.query.t == 1 ? '全天24小时营业' : '与门店营业时间一致'
				} else {
					return this.timeArr.map(v => {
						return `${v.startTime}-${v.ciri?'次日':''}${v.endTime}`
					}).toString()
				}
			},
			save() {
				if (this.aIdx == 2 && !this.timeArr.length) {
					return this.util.message('请添加时段', 3)
				} else if (this.aIdx == 2 && utils.jw(this.timeArr).includes('')) {
					return this.util.message('请选择时间', 3)
				}
				let lastPage = this.util.getPage(),
					// s = this.timeToDate(this.dateToTime()).substring(0, 11),
					arr = this.aIdx == 1 ? [] : this.timeArr
				// console.log(new Date().format('yyyy-MM-dd hh:mm'), this.timeToDate())
				// console.log(s, new Date('2020-07-03 08:00'), this.timeArr, arr)
				// return
				lastPage.$vm.getTime({
					radio: this.aIdx,
					time: this.formatTime(),
					times: this.timeArr,
				})
				utils.swnb()
				// console.log(this.query, this.aIdx, arr)
			},
		},
	}
</script>
<style scoped lang="scss">
	.yjic {
		height: 98rpx;
		border-radius: 98rpx;
	}
</style>
